<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>搜索分析- 翻页分析</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet"  href="${rc.contextPath}/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
<link rel="stylesheet"  href="${rc.contextPath}/stylesheets/daterangepicker.css">
<link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
</head>
<style>
 tr,th{text-align: center;}
 a:hover{color:blue;text-decoration: none;}
</style>
<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<div class="tab-content">
				<div id="manage" class="tab-pane active in">
					<div class="row">
						<div class="col-xs-12">
						<!-- 筛选条件开始 -->
							<div class="row">
								<div class="col-xs-12">
									<div class="widget-box">
										<div class="widget-header widget-header-small">
											<h4 class="widget-title">品类翻页次数</h4>
										</div>
										<div class="widget-body" style="background-color: #EFF3F8;">
											<div class="widget-main">
												<form class="form-inline" id="searchForm" method="post" action="#">
													<div class="form-group">
														<label for="exampleInputName2">选择时段
															<input type="text" id="config-demo" name="chooseTime" id="chooseTime" class="form-control time">
															<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																昨日
															</button>
															<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																过去7天
															</button>
															<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
																<span class="ace-icon icon-on-right bigger-110"></span>
																过去31天
															</button>
														</label>
														<label for="exampleInputName" style="margin-left: 30px;">平台：
															<select class="chosen-select" tabindex="2" name="platform_code" id="platform_code" style="width:80px;">
																<option value="">全部</option>
																<!-- <option value="pc">PC</option> -->
																<option value="app">APP</option>
																<option value="wap">WAP</option>
															</select>
														</label>
														
														<button id="search" type="button" class="btn btn-pink btn-sm"  style="margin-left: 50px;">
															<span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
														</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 筛选条件结束 -->
							
							<div class="row">
								<div class="col-xs-6">
									<div class="widget-box">
										<div class="widget-header widget-header-flat">
											<h4 class="widget-title lighter">
												<i class="ace-icon fa fa-signal blue"></i>品类翻页次数统计图（PV）
											</h4>
											<span style="font-size: 10px;">(视图可点击！！)</span>
											<label class="help_img">
												<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
												<span class='tips'>一段时间内进入搜索结果页各品类翻页的PV总量<s></s></span>
											</label>
										</div>
										<div class="widget-header widget-header-small">
											<div id="bar-chart" style="height: 430px;"></div>
										</div>
									</div>
								</div>
								<div class="col-xs-6"  id="chartByClick" style="display: none;padding-left: 0px!important;">
									  <div class="widget-box transparent">
										 <div class="widget-body">
											<div class="widget-main no-padding">
												<div class="widget-header widget-header-flat">
													<h4 class="widget-title lighter">
														<i class="ace-icon fa fa-star orange"></i>
														<label id="category"></label>
														<label id="dataSection" style="margin-left: 20px;"></label>
														<label  style="margin-right: 10px;float:right;">最大翻页数:<b id="maxPageNum"></b></label>
													</h4>
													<label class="help_img">
														<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
														<span class='tips'>一段时间内进入某一品类搜索结果页翻页到各个页码的量，展示翻页量排名前十的页码<s></s></span>
													</label>
												</div>
												<div style="padding-left: 20px;font-size: 14px;height:25px">其中：</div>
												<div class="widget-header widget-header-small">
													<div id="detail-chart" style="height: 400px;"></div>
												</div>
											</div>
									   </div>
									</div>
								</div>
							</div>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<script src="${rc.contextPath}/assets/js/user/base.js"></script>
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
	<script
		src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript"
		src="${rc.contextPath}/javascripts/moment.js"></script>
	<script type="text/javascript"
		src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/slider.js"></script>	
	<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
	<script type="text/javascript">
	d3.select(self.frameElement).style("height", "800px");
	$(document).ready(function(){
	 	getSearchDate();
	});
	
	$("#search").on("click",function(){
		getSearchDate();
	});
	function getSearchDate(){
		var choose_date = $("#config-demo").val();
		var platform_code = $("#platform_code").val();
		$.ajax({
			url : '${rc.contextPath}/searchStatistic/pageSkipAjaxData',
			type : "POST",
			data : {
				choose_date:choose_date,
				platform_code:platform_code
			},
			beforeSend: function(){
 			   $("#search").attr("disabled",true);
 			    openPartialLayer($("#bar-chart"));
	    	 },
		    complete: function(){
		    	$("#search").attr("disabled",false);
		    	removeLoading($("#bar-chart"));
		    },
			success:function(data) {
				var defs = {
						'category': {
							alias : '品类'
						},
						'amount': {
							alias :'翻页次数（次）'
						}
					}; 
			    var chart = histogramModal(data.barData,'bar-chart','category','amount','品类','翻页次数（次）','430',defs);
			    if(data.barData != "" && data.barData != null){
			      chart.on('plotclick',function(ev){
					  var data = ev.data;
					  if (data) {
					    var name = data._origin['category'];
					    var value = data._origin['amount'];
					    getDataByPageNum(name,value);
					  }
					});
					$("#bar-chart").css("cursor","pointer");
					var dataFirst = chart.getAllGeoms()[0].getData()[0];
					$("#chartByClick").show();
				    getDataByPageNum(dataFirst._origin['category'],dataFirst._origin['amount']);
			    }else{
			    	$("#chartByClick").hide();
			    }
			},
			error:function(data) {
				showMsg("查询数据有误");
			}
		});
	}
	
	function getDataByPageNum(category_name,value){
			var choose_date = $("#config-demo").val();
			var platform_code = $("#platform_code").val();
			$("#category").html(category_name);
	    	$("#dataSection").html(choose_date);
			$.ajax({
				url : '${rc.contextPath}/searchStatistic/pageCodeAjaxData',
				type : "POST",
				data : {
					choose_date:choose_date,
					platform_code:platform_code,
					category_name : category_name
				},
				beforeSend: function(){
	 			    openPartialLayer($("#detail-chart"));
		    	 },
			    complete: function(){
			    	removeLoading($("#detail-chart"));
			    },
				success:function(data) {
					$("#maxPageNum").html(data.pageNum);
					var defs = {
						'category': {
							alias : '页码'
						},
						'amount': {
							alias :'翻页次数（次）'
						}
					};
					horizontalHistogramModal(data.pageData,'detail-chart','category','amount',400,defs);
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
	}
	
	//导出图表
/*	function exportDataCsv(type){
		var choose_date = $("#config-demo").val();
		var platform_code = $("#platform_code").val();
		$.ajax({
			url : '${rc.contextPath}/searchStatistic/pageSkipAjaxData',
			type : "POST",
			data : {
				choose_date:choose_date,
				platform_code:platform_code
			},
			beforeSend: function(){
 			   $("#exportPageStatistic").attr("disabled",true);
	    	 },
		    complete: function(){
		    	$("#exportPageStatistic").attr("disabled",false);
		    },
			success:function(data) {
				var exportData=data.barData;
				var header=["品类","翻页次数"];
				var cols=["category","amount"];
				var filename="品类翻页次数统计";
				lll(filename,exportData,header,cols);
	        	var compare = function(a, b) {
        					if(a.category != b.category){
								return a.category > b.category ? 1 : -1;
							}else{
								return a.time > b.time ? 1 : -1;
							}
    					}
    			console.log(typeof cols === 'object' && !isNaN(cols.length));
				}else{
					var exportData=data.lineData;
					var compare = function(a, b) {
        					if(a.category != b.category){
								return a.category > b.category ? 1 : -1;
							}else{
								return a.time > b.time ? 1 : -1;
							}
    					}
    				exportData=exportData.sort(compare);
					var exportContent="\uFEFF品类,日期,点击量\n";
					for(var i=0;i<exportData.length;i++){
						exportContent += exportData[i].category+","+exportData[i].time+","+exportData[i].amount+"\n";
					} 
					var blob = new Blob([exportContent],{type: "text/plain;charset=utf-8"});
	        		saveAs(blob, "品类筛选条件点击量趋势.csv");
				}
				
			}
		});
	
	}*/
 </script>
</body>
</html>